<template>
    <div class="dimensionNav">
        <nav >
            <span v-for ="(item,index) in dimensionData.navData" :key = "index" 
             @click = "chooseDimension(item)">
                {{item.name}}
            </span>
        </nav>
        <product-choose v-show = "showProduct" :dimensionData = "dimensionData" :dimensionCode = "dimensionCode">
			<p>{{dimensionCode}}</p>
		</product-choose>
        <single-choose v-show = "showSingle" :dimensionData = "dimensionData" :dimensionCode = "dimensionCode">
						<p>{{dimensionCode}}</p>

		</single-choose>
    </div>
</template>
<script>
import ProductChoose from '@/DemoPages/DimensionChoose/ProductChoose'
import SingleChoose from '@/DemoPages/DimensionChoose/SingleChoose'
export default {
	props: ['dimensionData'],
	components: {
		ProductChoose,
		SingleChoose,
	},
	data() {
		return {
			showProduct: false,
			showSingle: false,
			dimensionCode: '',
		}
	},
	methods: {
		chooseDimension(item) {
			if (item.code === 'product') {
				this.showProduct = true
				this.showSingle = false
			} else {
				this.showProduct = false
				this.showSingle = true
			}
			this.dimensionCode = item.code
		},
	},
}
</script>
<style>
nav {
	display: flex;
	height: 40px;
	line-height: 40px;
}
span {
	flex: 1;
	/* padding: 20px 0; */
	border-bottom: 1px solid pink;
	border-right: 1px solid #dcdcdc;
}
span:last-child {
	border-right: none;
}
</style>